// Style setting
.cc-fancy-cursor .cm-s-obsidian.mod-cm6 {
  .cm-line {
    caret-color: var(--text-accent);
  }
  .CodeMirror-cursor,
  .cm-cursor,
  .cm-dropCursor {
    border-color: var(--text-accent);
  }
}

// Style setting
body.cc-em-strong .markdown-source-view.cm-s-obsidian {
  span.cm-formatting-strong.cm-header,
  span.cm-formatting-em.cm-header,
  span.cm-formatting-strong,
  span.cm-formatting-em {
    color: var(--shade-20);
    font-size: 0.777em;
  }
}

// Style setting
.cc-hr .cm-s-obsidian.mod-cm6 {
  .HyperMD-hr:not(.cm-active) span.cm-hr {
    color: transparent;
  }

  .HyperMD-hr:not(.cm-active) {
    background: linear-gradient(
      180deg,
      transparent calc(50% - 1px),
      var(--shade-10) 50%,
      transparent calc(50% + 1px)
    );
  }
}

// Style setting
.cc-editor-list-bullets {
  .cm-s-obsidian.mod-cm6:not(.is-live-preview) span.cm-formatting-list-ul {
    color: transparent !important;
    position: relative;

    &:before {
      line-height: 0;
      position: absolute;
      top: 51%;
      left: 0;
      display: block;
      transform: translate(-40%, -50%);
      width: 6px;
      height: 6px;
      content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" style="fill:rgba(0, 0, 0);"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z"></path></svg>');
    }
  }

  &.theme-dark
    .cm-s-obsidian:not(.is-live-preview)
    span.cm-formatting-list-ul:before {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" style="fill:rgba(204,204,204);"><path d="M12,2C6.486,2,2,6.486,2,12s4.486,10,10,10s10-4.486,10-10S17.514,2,12,2z"></path></svg>');
  }

  .cm-s-obsidian .HyperMD-list-line {
    padding-top: 0;
    padding-bottom: 10px;
  }
}

// Style setting
.cc-editor-heading-hash {
  .cm-s-obsidian.mod-cm6:not(.is-live-preview) .cm-header.cm-formatting-header {
    &.obsidian-search-match-highlight {
      background: transparent;
    }
  }

  .cm-s-obsidian.mod-cm6:not(.is-live-preview) .HyperMD-header {
    position: relative;

    &:not(.cm-active) .cm-formatting-header:not(:only-child) {
      &:after {
        background-color: transparent;
        color: transparent;
      }
    }

    .cm-formatting-header:not(:only-child) {
      z-index: 1000;
      position: absolute;
      left: 0;
      transform: translateX(-100%);
      display: inline-block;
      color: transparent;

      &:after {
        background-color: var(--background-primary);
        font-family: var(--font-interface);
        color: var(--text-faint);
        font-weight: var(--normal-weight);
        font-size: 10px;
        position: absolute;
        bottom: 15%;
        right: 0;
      }

      &.cm-header-1:after {
        content: "#";
      }

      &.cm-header-2:after {
        content: "##";
      }

      &.cm-header-3:after {
        content: "###";
      }

      &.cm-header-4:after {
        content: "####";
      }

      &.cm-header-5:after {
        content: "#####";
      }

      &.cm-header-6:after {
        content: "######";
      }
    }
  }

  &.is-mobile
    .cm-s-obsidian:not(.is-live-preview)
    .HyperMD-header
    .cm-formatting-header:not(:only-child):after {
    letter-spacing: -3px;
  }
}

// Style setting
.cc-lp-editor-heading-hash {
  .cm-s-obsidian.mod-cm6.is-live-preview .cm-header.cm-formatting-header {
    &.obsidian-search-match-highlight {
      background: transparent;
    }
  }

  .cm-s-obsidian.mod-cm6.is-live-preview .HyperMD-header {
    position: relative;

    &:not(.cm-active) .cm-formatting-header:not(:only-child) {
      &:after {
        background-color: transparent;
        color: transparent;
      }
    }

    .cm-formatting-header:not(:only-child) {
      z-index: 1000;
      position: absolute;
      left: 0;
      transform: translateX(-100%);
      display: inline-block;
      color: transparent;

      &:after {
        background-color: var(--background-primary);
        bottom: 15%;
        color: var(--text-faint);
        font-family: var(--font-interface);
        font-size: 10px;
        font-weight: var(--normal-weight);
        position: absolute;
        right: 0;
      }

      &.cm-header-1:after {
        content: "#";
      }

      &.cm-header-2:after {
        content: "##";
      }

      &.cm-header-3:after {
        content: "###";
      }

      &.cm-header-4:after {
        content: "####";
      }

      &.cm-header-5:after {
        content: "#####";
      }

      &.cm-header-6:after {
        content: "######";
      }
    }
  }

  &.is-mobile
    .cm-s-obsidian.is-live-preview
    .HyperMD-header
    .cm-formatting-header:not(:only-child):after {
    letter-spacing: -3px;
  }
}
